<template>
  <div class="app-container">
    <el-form label-width="120px">

      <el-form-item label="产品名称">
        <el-input v-model="addData.productName" placeholder="请输入产品名称"  style="width:400px" />
      </el-form-item>
     

      <el-form-item label="发行机构">
        <el-input v-model="addData.issuer" placeholder="信息披露"  style="width:400px"/>
      </el-form-item>

      <el-form-item label="黄金价格">
        <el-input v-model="addData.goldPrice" placeholder="信息披露"  style="width:400px"/>  
      </el-form-item>

       <el-form-item label="风险等级">
        <el-select  filterable placeholder="请选择（信息披露）" v-model="addData.riskGrade">
          <el-option
            v-for="item in getRiskGrade"
            :key="item.id"
            :label="item.description"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="购买金额">
        <el-input v-model="addData.monetary" placeholder="交易规则"  style="width:400px"/>  
      </el-form-item>

      <el-form-item label="年龄范围">
        <el-input v-model="addData.ageRange" placeholder="交易规则"  style="width:400px"/>  
      </el-form-item>

      <el-form-item label="领取金额">
        <el-input v-model="addData.receivePrice" placeholder="交易规则"  style="width:400px"/>  
      </el-form-item>

      <el-form-item label="资金到账日期">
        <el-input v-model="addData.receiveDate" placeholder="交易规则"  style="width:400px"/>  
      </el-form-item>

      <el-form-item label="交易日期">
        <el-input v-model="addData.tradeDate" placeholder="交易规则"  style="width:400px"/>  
      </el-form-item>
      
      <el-form-item label="兑换实物金">
        <el-input v-model="addData.exchange" placeholder="交易规则"  style="width:400px"/>  
      </el-form-item>

      <el-form-item label="利息规则">
        <el-input v-model="addData.interestRule" placeholder="收益与费用"  style="width:400px"/>  
      </el-form-item>

      <el-form-item label="产品介绍">
        <el-input v-model="addData.introduction" placeholder="交易规则"  style="width:400px"/>  
      </el-form-item>

      <el-form-item label="费用规则">
        <el-input v-model="addData.costRule" placeholder="收益与费用"  style="width:400px"/>  
      </el-form-item>

      <el-form-item label="利息率">
        <el-input v-model="addData.arp" placeholder="用于计算"  style="width:400px"/>  
      </el-form-item>

      <el-form-item label="平台手续费">
        <el-input v-model="addData.serverCharge" placeholder="百分比"  style="width:400px"/>  
      </el-form-item>

      <el-form-item label="平台抽成费率">
        <el-input v-model="addData.commission" placeholder="百分比"  style="width:400px"/>  
      </el-form-item>

      <el-form-item label="产品数量">
        <el-input v-model="addData.amount" placeholder="黄金克数"  style="width:400px"/>  
      </el-form-item>

      <el-form-item label="起购金额">
        <el-input v-model="addData.minMonetary" placeholder=""  style="width:400px">
        <template slot="prepend">¥：</template>
        </el-input>
      </el-form-item>

      <el-form-item label="数据接口类型">
        <el-select  filterable placeholder="请选择（信息披露）" v-model="addData.type"> 
          <el-option 
            v-for="item in getGoldAPITpyes" 
            :key="item.id"
            :label="item.name"
            :value="item.id" >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="交易日期">
        <el-select  filterable placeholder="请选择星期" v-model="addData.startTime"> 
          <el-option 
            v-for="item in week" 
            :key="item.value"
            :label="item.label"
            :value="item.value" >
          </el-option>
        </el-select>

          <!-- <el-time-picker
            v-model="addData.date1"
            :picker-options="{
              selectableRange: '0:0:00 - 23:59:59'
            }"
            placeholder="任意时间点">
          </el-time-picker> -->

      <el-select  filterable placeholder="小时" v-model="addData.startHour"> 
                <el-option 
                  v-for="item in hour" 
                  :key="item.value"
                  :label="item.value"
                  :value="item.value" >
                </el-option>
          </el-select>
   
          
<i>~</i>
          <el-select  filterable placeholder="请选择星期" v-model="addData.endTime"> 
                <el-option 
                  v-for="item in week" 
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" >
                </el-option>
          </el-select>

                    <!-- <el-time-picker
                      v-model="addData.date2"
                      :picker-options="{
                        selectableRange: '0:0:00 - 23:59:59'
                      }"
                      placeholder="任意时间点">
                    </el-time-picker> -->

                 
          <el-select  filterable placeholder="小时" v-model="addData.endHour"> 
                <el-option 
                  v-for="item in hour" 
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" >
                </el-option>
          </el-select>
               

      </el-form-item>

    


      
      <el-form-item>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="saveOrUpdate()"
          >保存</el-button>

             <el-button type="info" plain @click="cancleSaveOrUpdate"
          >取消</el-button
        >


      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import activityShow from "@/api/goldServer";
import ImageCropper from "@/components/ImageCropper";
import PanThumb from "@/components/PanThumb";

export default {
  components: { PanThumb, ImageCropper },
  data() {
    return {   
      getRiskGrade: [],
      getGoldAPITpyes: [],
      date: new Date(),
      week:[
        {
          value: 1,
          label: "星期一",
        },{
          value: 2,
          label: "星期二",
        },{
          value: 3,
          label: "星期三",
        },{
          value: 4,
          label: "星期四",
        },{
          value: 5,
          label: "星期五",
        },{
          value: 6,
          label: "星期六",
        },{
          value: 7,
          label: "星期天",
        },
      ],
      hour:[
        {value:0,label:0},{value:1,label:1},{value:2,label:2},{value:3,label:3},{value:4,label:4},{value:5,label:5},{value:6,label:6},{value:7,label:7},
        {value:8,label:8},{value:9,label:9},{value:10,label:10},{value:11,label:11},{value:12,label:12},{value:13,label:13},{value:14,label:14},{value:15,label:15},
        {value:16,label:16},{value:17,label:17},{value:18,label:18},{value:19,label:19},{value:20,label:20},{value:21,label:21},{value:22,label:22},{value:23,label:23}
      ],

      addData: {
        endHour:"",
        startHour:"",
        id:"",
        costRule:"",
        productName: "",
        issuer: "",
        goldPrice:"",
        riskGrade:"",
        monetary:"",
        ageRange:"",
        receivePrice:"",
        receiveDate:"",
        tradeDate:"",
        exchange:"",
        interestRule:"",
        introduction:"",
        minMonetary:"",
        type:"",
        arp:"",
        serverCharge:"",
        commission:"",
        amount:"",
        startTime:"",
        endTime:""
      },
      saveBtnDisabled: false, // 保存按钮是否禁用,
      imagecropperShow: false, //头像上传组件是否显示
      imagecropperKey: 0,
      BASE_API: process.env.BASE_API, //获取dev.env.js里面的地址
    };
  },
  created() {
    //页面渲染之前执行
    this.init();
  },
  watch: {
    //监听
    $route(to, from) {
      //路由变化方式，路由发生变化，方法就会执行
      this.init();
    },
  },
  methods: {
    close() {
      //关闭上传头像组件
      this.imagecropperShow = false;
      //上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1;
    },
    cropSuccess(data) {
      //上传成功后返回的图片地址
      this.addData.pic = data.fileUrl;
      //上传头像成功
      this.imagecropperShow = false;
      //上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1;
    },
    init() {
      activityShow.getRiskGradeAndGoldAPIType().then((response)=>{
          // console.log(response.data.goldAPIType);
          console.log(response.data.goldAPIType)
          this.getGoldAPITpyes=response.data.goldAPIType;
          this.getRiskGrade=response.data.riskGrade;
   
      })

      //判断路径有id值,做修改
      if (this.$route.params && this.$route.params.id) {
        //从路径获取id值
        const id = this.$route.params.id;
        //调用根据id查询的方法
        this.getInfo(id);
      } else {
        //路径没有id值，做添加
        //清空表单
        this.slideShow = {};
        // console.log(this.addData.id)
        // this.getInfo(2);
      }
    },
    //根据讲师id查询的方法
    getInfo(id) {
      console.log(id)
      activityShow.getGoldProudct(id).then((response) => {
        console.log(response.data) 
        this.addData = response.data;
      });
    },
      //取消操作
    cancleSaveOrUpdate() {
      //判断当前产品状态,来决定跳转哪一个页面
     
        //回到已下架列表页面 路由跳转
        this.$router.push({ path: "/list/gold" });
     
    },
    saveOrUpdate() {
      //判断修改还是添加
      //根据teacher是否有id
      if (!this.addData.id) {
        //添加
        this.addProduct();
      } else {
        //修改
        this.updateProductMsg();
      }
    },
    //修改轮播图的方法
    updateProductMsg() {
      activityShow.updateGoldProduct(this.addData).then((response) => {
        //提示信息
        this.$message({
          type: "success",
          message: "修改成功!",
        });
        //回到列表页面 路由跳转
        this.$router.push("/list/gold");
      });
    },
    //添加轮播图的方法
    addProduct() {
      console.log(activityShow)
      activityShow.saveAddProduct(this.addData).then((response) => {
        //添加成功
        //提示信息
        this.$message({
          type: "success",
          message: "添加成功!",
        });
        //回到列表页面 路由跳转
        this.$router.push( "/list/gold" );
      });
    },
  },
};
</script>
